/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import 'package:flutter/cupertino.dart';
import 'package:hadss_adaptive_layout/hadss_adaptive_layout.dart';

import '../../../l10n/generated/app_localizations.dart';

class GridWidget extends StatefulWidget {
  final WidthBreakpoint screenType;
  final num currentWidth;

  const GridWidget(
      {Key? key, required this.screenType, required this.currentWidth})
      : super(key: key);

  @override
  State<GridWidget> createState() => _GridWidgetState();
}

class _GridWidgetState extends State<GridWidget> {
  @override
  Widget build(BuildContext context) {
    AppLocalizations il8n = AppLocalizations.of(context)!;
    bool isLg = widget.screenType == WidthBreakpoint.lg ||
        widget.screenType == WidthBreakpoint.xl;
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        if (isLg) const SizedBox(height: 20),
        Container(
          margin: const EdgeInsets.only(left: 10, right: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Image.asset(
                    'lib/assets/images/music/music_pay.png',
                    width: 36,
                    height: 36,
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Text(
                    il8n.playAll,
                    style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 18),
                  )
                ],
              ),
              Image.asset('lib/assets/images/music/ic_music_anthology.png')
            ],
          ),
        ),
        Container(
          margin: const EdgeInsets.only(left: 16, right: 16),
          child: GridRow(
            gridCols: List.generate(26, (index) {
              return GridCol(
                span: SpanOption(xs: 12, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6),
                offset: 0,
                order: 1,
                child: Container(
                  margin: const EdgeInsets.only(top: 10),
                  child: Container(
                    padding: const EdgeInsets.only(bottom: 15),
                    decoration: const BoxDecoration(
                        border: Border(
                      bottom:
                          BorderSide(width: 1.0, color: Color(0xFFF2F2F2)),
                    )),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              il8n.myMusicTitle,
                              style: const TextStyle(
                                  fontSize: 16, fontWeight: FontWeight.w500),
                            ),
                            Row(
                              children: [
                                Container(
                                  margin: const EdgeInsets.only(right: 3),
                                  child: Image.asset(
                                      'lib/assets/images/music/music-sq.png'),
                                ),
                                Text(
                                  il8n.author,
                                  style: const TextStyle(
                                      fontSize: 12,
                                      color: Color.fromRGBO(0, 0, 0, 0.4),
                                      fontWeight: FontWeight.w500),
                                )
                              ],
                            )
                          ],
                        ),
                        Image.asset(
                            'lib/assets/images/music/ic_music_more.png')
                      ],
                    ),
                  ),
                ),
              );
            }),
            columns: 12,
            gutter: const Gutter(x: 20, y: 8),
            margin: const EdgeInsets.symmetric(horizontal: 0),
            range: BreakpointRange(list: [320, 600, 840, 1440, 2000]),
          ),
        )
      ],
    );
  }
}
